<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>公司产品</title>
    <link rel="icon" type="image/png" href="/img/icon.png">
    <script type="text/javascript" src="/h5/newall/newall.js?c=2"></script>
    <link rel="stylesheet" type="text/css" href="/h5/newall/newall.css?c=2">
</head>
<body>
<div class="mui-content-padded H5body basedata">
    <div class="topmsg">
        <p class="msgtext">注册填写/上传的信息越全面，客户信任度越高</p>
    </div>
    <MCform id="Form" class="mctag" fromapi="/api/app/call/getgongchangshebei_gc">
        <MCtitle class="mctag">工程设备</MCtitle>
        <div class="content content1 chanpin">
            <h2 class="title">设备选择</h2>
            <p class="desc">请选择产品，选择不上限</p>
            <ul mcname="shebeilist" class="selecttagul">
                <li v-for="(value, key, index) in shebeilist" class="tagli" v-bind:class="{on:value.on}" :value="key">
                    {{value.pinpai}}
                </li>
                <li class="tagli plus">添加+</li>
            </ul>


            <button id="submit" type="submit"
                    class="mui-btn mui-btn-primary">
                保存
            </button>
        </div>


    </MCform>

    <MCform id="shebeiform" class="mctag" style="display: none">
        <div class="backBody"></div>
        <div class="s_content">
            <div class="TitleBar">
                <a class="backBtn"></a>
                <span class="spantitle">设备名称</span>
                <a class="fuanniu fubiaoti ui_btn">保存</a>
            </div>
            <input mcname="listkey" type="hidden">
            <ul class="baseul basephotoUl">
                <li class="li">
                    <p class="title">品牌<span class="red">*</span></p>
                    <input mcname="pinpai" type="text" placeholder="请输入品牌名" class="mui-input">
                </li>
                <li class="li">
                    <p class="title">年限<span class="red">*</span></p>
                    <input mcname="nianxian" type="text" placeholder="请输入品牌年限（年）" class="mui-input">
                </li>
                <li class="li">
                    <p class="title">数量<span class="red">*</span></p>
                    <input mcname="num" type="text" placeholder="请输入（台）" class="mui-input">
                </li>
                <li class="li"><p class="ti">照片<span class="red">*</span></p>
                    <div mcname="pic" defaultval="[]" class="conli clearfix">
                        <div v-for="li in pic" class="photodiv on"><img :imgvalue="li" :src="li" class="pic"/>
                            <i class="closeico"></i>
                        </div>
                        <div v-bind:style="{display:pic.length<3?'block':'none'}" class="photodiv photodivfile">
                            <input type="file"> <i class="cameraIco"></i>
                            <p class="p">请上传/拍摄(<span>{{pic.length}}</span>/3)</p></div>
                    </div>
                </li>
            </ul>
        </div>
    </MCform>


</div>

<script type="text/javascript" src="/h5/js/all2.js?c=2"></script>
</body>

<style>
    #shebeiform {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
        padding-bottom: 0;
    }

    #shebeiform .backBody {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0, 0, 0, 0.8);

    }

    #shebeiform .s_content {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        background-color: white;
        top: 0.6rem;
        border-radius: 0.1rem 0.1rem 0 0;
        overflow: hidden;
    }

    #shebeiform .s_content .TitleBar {
        position: relative;
        box-shadow: none;
        background-color: white;
    }

    #shebeiform .s_content .baseul {
        width: 90%;
        margin: 0 auto;
    }


</style>
<script>

    ///fromapi="/api/app/call/getusers_basechanpin_gs"
    var view = new MC.View.MCform('#Form');
    var shebeiform = new MC.View.MCform('#shebeiform');

    $('.selecttagul').on('click', '.tagli', function () {
        var obj = $(this);
        var key = obj.attr('value');
        var valobj = view.vue.shebeilist[key];
        if (!valobj) {
            shebeiform.vue.listkey = null;
            shebeiform.vue.pinpai = '';
            shebeiform.vue.nianxian = '';
            shebeiform.vue.num = '';
            shebeiform.vue.pic = [];
            $('#shebeiform').show();
            return;
        }
        console.log(valobj, view.vue.shebeilist[key]);
        if (valobj.on) {
            valobj.on = false;
        } else {
              valobj.on=true;
            shebeiform.vue.listkey = key;
            shebeiform.vue.pinpai = valobj.pinpai;
            shebeiform.vue.nianxian = valobj.nianxian;
            shebeiform.vue.num = valobj.num;
            shebeiform.vue.pic = valobj.pic;
            $('#shebeiform').show();
        }
    });


    $('.basephotoUl .photodiv').on('click', function (e) {
        var li = $(e.currentTarget).find('[type=file]');
        li[0].click();
    });
    ///   view.vue.zongjingban=['http://www.fuzhuangchangongxiao.cn/uploads/20200425/1261e1097568472b1ebff5d84282336esmall.jpg'];
    MC.API.bindFileUp($(".basephotoUl .li [type=file]"), (src, sel, obj) => {
        var par = $(obj).parents('[mcname]');
        var mcname = par.attr('mcname');
        shebeiform.vue[mcname].push(src);
        if (shebeiform.vue[mcname].length == 3) {
            // $('[mcname='+mcname+'] .photodivfile').hide();
        }
    });
    $('.basephotoUl').on('click', ".photodiv .closeico", function () {
        var par = $(this).parent();
        var mcname = $(this).parents('[mcname]').attr('mcname');
        var delsrc = par.find('.pic').attr('imgvalue');
        var listJQ = $('[mcname=' + mcname + '] .photodiv.on .pic');
        var list = [];
        for (var i = 0; i < listJQ.length; i++) {
            var src = $(listJQ[i]).attr('imgvalue');
            if (src !== delsrc)
                list.push(src);
        }
        shebeiform.vue[mcname] = list;
    });

    $('#shebeiform .TitleBar .backBtn').on('click', function () {
        $('#shebeiform').hide();
    });
    $('#shebeiform .TitleBar .fuanniu').on('click', function () {
        console.log(shebeiform.vue.listkey);
        var key = shebeiform.vue.listkey;
        if (shebeiform.vue.pinpai == '') {
            return MC.msg.alert('品牌名称不能为空');
        }
        if (shebeiform.vue.nianxian == '') {
            return MC.msg.alert('年限不能为空');
        }
        if (shebeiform.vue.num == '') {
            return MC.msg.alert('数量不能为空');
        }
        if (shebeiform.vue.pic == '' && shebeiform.vue.pic.length == 0) {
            return MC.msg.alert('照片不能为空');
        }
        var newobj = {};
        if (key) {
            newobj = view.vue.shebeilist[key];
            newobj.pinpai = shebeiform.vue.pinpai;
            newobj.nianxian = shebeiform.vue.nianxian;
            newobj.num = shebeiform.vue.num;
            newobj.pic = shebeiform.vue.pic;
            newobj.on = true;
        } else {
            for (var obj of view.vue.shebeilist) {
                if (obj.pinpai == shebeiform.vue.pinpai) {
                    return MC.msg.alert('品牌名称不能有重复');
                }
            }
            newobj.pinpai = shebeiform.vue.pinpai;
            newobj.nianxian = shebeiform.vue.nianxian;
            newobj.num = shebeiform.vue.num;
            newobj.pic = shebeiform.vue.pic;
            newobj.on = true;
            view.vue.shebeilist.push(newobj);
        }
        $('#shebeiform').hide();
    });


    $('#submit').on('click', function () {
        var list = [];
        for (var obj of view.vue.shebeilist) {
            if (obj.on) {
                list.push({
                    pinpai: obj.pinpai,
                    nianxian: obj.nianxian,
                    num: obj.num,
                    pic: obj.pic,
                });
            }
        }
        var str=JSON.stringify(list);
        console.log(str,list);
        MC.apiD('setgongchangshebei_gc',{
            shebei:str
        },function () {
            MC.msg.show('保存成功');
        });
    });

</script>
</body>
</html>


















